<template>

  <div class="co_l mt10 app-container">
    <div class="as_head tac">
      <span class="as_h_title">{{ examInfo.name }}</span>
      <!--<span class="as_h_br">{{ examInfo.typeName }}</span>
      <span class="as_h_br">{{ examInfo.name }}</span>-->
    </div>
    <div class="as_box_topic" v-for="(paperMiddle,index) in examInfo.list" :key="index" >
      <div class="rt_topic"><span class="rt_t_title">{{ paperMiddle.name }}
        <span class="rt_t_br" v-if="paperMiddle.type == 1">（每题备选答案中，只有一个为正确答案。错选、不选均不得分）</span>
        <span class="rt_t_br" v-if="paperMiddle.type == 2">（每题备选答案中，有两个或两个以上为正确答案。多选、少选、错选、不选均不得分）</span>
        <span class="rt_t_br" v-if="paperMiddle.type == 3">（判断每小题的表述是否正确。选错、不选均不得分）</span>
        <span class="rt_t_br" v-if="paperMiddle.type == 4">（根据题干，将空补充完整。有错别字、不填、漏字等均不得分）</span>
      </span></div>
      <!-- 单选题 -->
        <div class="type" :ref="qstmiddle.id"  v-for="(qstmiddle,index) in paperMiddle.questionArr" :key="index" >
          <div class="rt_topic_num">
            <div class="float_left num_topic d_jump">{{ qstmiddle.num }}</div>
            <div class="float_right">
<!--              <div class="float_left dia_love" @click="tanshow()">
                <img
                    src=""
                    class="dia_err_img">纠错
              </div>-->
              <div class="float_left dia_love" v-if="qstmiddle.userFavor" @click="removeFav(qstmiddle)">
                <div class="love_bg love_bg_ed" ></div>
                已收藏
              </div>
              <div class="float_left dia_love" v-if="qstmiddle.userFavor == false" @click="saveFav(qstmiddle)">
                <div class="love_bg " ></div>
                收藏
              </div>
              <div class="float_left dia_love" v-if="qstmiddle.signFlag == true" @click="clickSignFalse(qstmiddle)">
                <div class="sign_bg sign_bg_ed"></div>
                标记
              </div>
              <div class="float_left dia_love" v-if="qstmiddle.signFlag == false" @click="clickSignTrue(qstmiddle)">
                <div class="sign_bg"></div>
                标记
              </div>
            </div>
            <div class="clear_b"></div>
          </div>
          <div class="rt_topic_con" v-if="paperMiddle.type == 1">
            <div class="cm_t_title"><span v-html="qstmiddle.qstContent"></span><span class="cm_score">（{{ paperMiddle.score }}分）</span>
            </div>
            <div class="cm_options">
              <div class="cm_op_box" v-for="(ques,index) in qstmiddle.optionList" :key="index" @click="radioboxChange(qstmiddle,index)">
                <div class="cm_op_l " :class="{'cm_op_bg':indexToString(index)==qstmiddle.useranswer}">{{indexToString(index)}}</div>
                <span class="cm_op_font" v-html="ques.value"></span></div>
            </div>
          </div>
          <div class="rt_topic_con" v-if="paperMiddle.type == 2">
            <div class="cm_t_title"><span v-html="qstmiddle.qstContent"></span><span class="cm_score">（{{ paperMiddle.score }}分）</span>
            </div>
            <div class="cm_options">
              <div class="cm_op_box" v-for="(ques,index) in qstmiddle.optionList" :key="index" @click="checkboxChange(qstmiddle,index)">
                <div class="cm_op_d " :class="{'cm_op_bg':check(index,qstmiddle.useranswer)}">{{indexToString(index)}}</div>
                <span class="cm_op_font" v-html="ques.value"></span></div>
            </div>
          </div>
          <div class="rt_topic_con" v-if="paperMiddle.type == 3">
            <div class="cm_t_title"><span v-html="qstmiddle.qstContent"></span><span class="cm_score">（{{ paperMiddle.score }}分）</span>
            </div>
            <div class="cm_options">
              <div class="cm_op_box" @click="radioboxChange(qstmiddle,0)">
                <div class="cm_op_l" :class="{'cm_op_bg':indexToString(0)==qstmiddle.useranswer}">A</div>
                <span class="cm_op_font">是</span></div>
              <div class="cm_op_box" @click="radioboxChange(qstmiddle,1)">
                <div class="cm_op_l" :class="{'cm_op_bg':indexToString(1)==qstmiddle.useranswer}">B</div>
                <span class="cm_op_font">不是</span></div>
            </div>
          </div>
          <div class="rt_topic_con" v-if="paperMiddle.type == 4">
            <div class="cm_t_title"><span v-html="qstmiddle.qstContent"></span><span class="cm_score">（{{ paperMiddle.score }}分）</span>
            </div>
            <div class="cm_options">
              <div class="cm_d_font float_left">答案：</div>
              <div class="float_left">
                <div class="tk_number" v-for="(option,index) of qstmiddle.isAsr.split(',')" :key="index">（{{ index+1 }}）
                <input type="text" class="tk_number_input" v-model="qstmiddle.answerArr[index]" @blur="textInput(qstmiddle)"></div>
              </div>
              <div class="clear_b"></div>
            </div>
          </div>
        </div>
    </div>
    <div class="d_tips">
      <!--纠错弹出-->
      <div class="ex_mask" v-bind:class="{'hide' :1 == tanflag}">
        <div class="ex003"><p class="ex_title">我要纠错</p>
          <p class="ex_br">您的建议对我们很宝贵</p>
          <div class="ex_box"><p class="ex_b_title">纠错内容</p>
            <div class="ex_b_ops"><textarea placeholder="请输入纠错内容，我们会在收到时及时为你解决"
                                            class="txt_con"></textarea></div>
          </div>
          <div class="float_left ex_b_comm submit_b submit_b2" @click="tanhide()">提交</div>
          <div class="float_right ex_b_comm close_b close_b2" @click="tanhide()">取消</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {favoritesqstSave,favoritesqstRemove} from "@/api";
import {indexToString} from '@/util/common'
import {mapGetters} from "vuex";

export default {
  name: 'courseListContent',
  data() {
    return {

      tanflag: 1,
      jiaojuantanflag: 1,
      courseList: [],
      current: 1,
      size: 10,
      sellType: "",
      level: "",
      subjectId: "",
      subject1Id: "",
      pageList: [],
      pages: 0,
      page: {},
      levelFlag: false,
      orderBy: "default",
    }
  },
  components: {},
  methods: {
    textInput(qstmiddle){
      qstmiddle.useranswer = qstmiddle.answerArr.toString();
    },
    go(index){
      let anchor = this.$refs[index][0].offsetTop;
      this.$nextTick(() => {
        document.body.scrollTop = anchor;
      });
    },
    radioboxChange(qstmiddle,index){
      qstmiddle.useranswer = ''
      qstmiddle.useranswer = indexToString(index);
    },
    checkboxChange(qstmiddle,index){
      let answer = indexToString(index);
      let useranswer = qstmiddle.useranswer;
      let arr = [];
      if(useranswer != ''){
        arr = useranswer.split(",");
      }
      if(arr.indexOf(answer) == -1){
        arr.push(answer)
        arr.sort();
        let str = "";
        for (let i = 0; i < arr.length; i++) {
          if(i == 0){
            str += arr[i]
          }else{
            str += ","+arr[i]
          }
        }
        qstmiddle.useranswer = str
      }else{
        let str = ""
        for (let i = 0; i < arr.length; i++) {
          if(answer != arr[i]){
            str += arr[i]+","
          }
        }
        str = str.substr(0,str.length - 1)
        qstmiddle.useranswer = str
      }
      console.log(qstmiddle.useranswer)

    },
    check(index,useranswer){
      let arr = useranswer.split(",");
      if(arr.indexOf(indexToString(index)) !=-1){
        return true
      }else{
        return false;
      }
    },
    clickSignFalse(qstmiddle){
      qstmiddle.signFlag = false;
    },
    clickSignTrue(qstmiddle){
      qstmiddle.signFlag = true;
    },
    indexToString(str){
      return indexToString(str);
    },
    saveFav(qstmiddle){
      let param = {
        qstId:qstmiddle.qstId
      }
      favoritesqstSave(param).then(res=>{
        qstmiddle.userFavor = true
        this.$layer.alert(
            "收藏成功！",
            {
              shade: true,
              title: "提示"
            },
            laeryid => {
              this.$layer.close(laeryid);
            }
        );
      })
    },
    removeFav(qstmiddle){
      let param = {
        qstId:qstmiddle.qstId
      }
      favoritesqstRemove(param).then(res=>{
        qstmiddle.userFavor = false
        this.$layer.alert(
            "取消收藏！",
            {
              shade: true,
              title: "提示"
            },
            laeryid => {
              this.$layer.close(laeryid);
            }
        );
      })
    },
  },
  mounted: function () {
  },
  props:{
    examInfo: Object,
  },
  watch: {
    examInfo: {
      deep: true,
      handler(newVal){
        console.log(newVal)
      }
    },
  },
  computed: {
    ...mapGetters(["studentInfo"]),
  },
}
</script>

<style scoped>

</style>
